<template>
  <a-button>adadada</a-button>
  <div
    ref="CloudArea"
    style="width: 100%; height: 879px; margin: 0; padding: 0"
  />
  <a-button>adadada</a-button>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';

  const mask = new Image();
  // mask.src = ""
  mask.src =
    '';
  // '';
  export default {
    name: 'CloudArea',
    props: {
      currentTab: String,
    },
    data() {
      return {
        chart: '',
      };
    },
    // watch: {
    //   currentTab() {
    //     this.initEcharts(this.currentTab);
    //   },
    // },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
      });
    },
    methods: {
      initChart() {
        // eslint-disable-next-line no-shadow
        this.chart = echarts.init(this.$refs.CloudArea); // 获取到容器的节点，初始化echarts实例
        const option = {
          // 指定配置项和数据

          tooltip: {
            // show: false,
            // // formatter: '{b}<br/>{c} '
          },
          textStyle: {
            color() {
              return `rgb(${[
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(',')})`;
            },
          },

          series: [
            {
              type: 'wordCloud',
              // gridSize: 2,
              // sizeRange: [12, 50],
              // // rotationRange: [-90, 90],
              // rotationRange: [-50, 50],

              gridSize: 1,
              sizeRange: [12, 55],
              rotationRange: [-45, 0, 45, 90],

              // shape: 'triangle',
              // width: 100,
              // height: 400,
              // maskImage:
              //   '',
              // '',
              // '',

              maskImage: mask,
              // maskeImage:"",
              data: [
                {
                  name: '花鸟市场',
                  value: 1446,
                },
                {
                  name: '汽车',
                  value: 928,
                },
                {
                  name: '视频',
                  value: 906,
                },
                {
                  name: '电视',
                  value: 825,
                },
                {
                  name: 'Lover Boy 88',
                  value: 514,
                },
                {
                  name: '动漫',
                  value: 486,
                },
                {
                  name: '音乐',
                  value: 53,
                },
                {
                  name: '直播',
                  value: 163,
                },
                {
                  name: '广播电台',
                  value: 86,
                },
                {
                  name: '戏曲曲艺',
                  value: 17,
                },
                {
                  name: '演出票务',
                  value: 6,
                },
                {
                  name: '给陌生的你听',
                  value: 1,
                },
                {
                  name: '资讯',
                  value: 1437,
                },
                {
                  name: '商业财经',
                  value: 422,
                },
                {
                  name: '娱乐八卦',
                  value: 353,
                },
                {
                  name: '军事',
                  value: 331,
                },
                {
                  name: '科技资讯',
                  value: 313,
                },
                {
                  name: '社会时政',
                  value: 307,
                },
                {
                  name: '时尚',
                  value: 43,
                },
                {
                  name: '网络奇闻',
                  value: 15,
                },
                {
                  name: '旅游出行',
                  value: 438,
                },
                {
                  name: '景点类型',
                  value: 957,
                },
                {
                  name: '国内游',
                  value: 927,
                },
                {
                  name: '远途出行方式',
                  value: 908,
                },
                {
                  name: '酒店',
                  value: 693,
                },
                {
                  name: '关注景点',
                  value: 611,
                },
                {
                  name: '旅游网站偏好',
                  value: 512,
                },
                {
                  name: '出国游',
                  value: 382,
                },
                {
                  name: '交通票务',
                  value: 312,
                },
                {
                  name: '旅游方式',
                  value: 187,
                },
                {
                  name: '旅游主题',
                  value: 163,
                },
                {
                  name: '港澳台',
                  value: 104,
                },
                {
                  name: '本地周边游',
                  value: 3,
                },
                {
                  name: '小卖家',
                  value: 1331,
                },
                {
                  name: '全日制学校',
                  value: 941,
                },
                {
                  name: '基础教育科目',
                  value: 585,
                },
                {
                  name: '考试培训',
                  value: 473,
                },
                {
                  name: '语言学习',
                  value: 358,
                },
                {
                  name: '留学',
                  value: 246,
                },
                {
                  name: 'K12课程培训',
                  value: 207,
                },
                {
                  name: '艺术培训',
                  value: 194,
                },
                {
                  name: '技能培训',
                  value: 104,
                },
                {
                  name: 'IT培训',
                  value: 87,
                },
                {
                  name: '高等教育专业',
                  value: 63,
                },
                {
                  name: '家教',
                  value: 48,
                },
                {
                  name: '体育培训',
                  value: 23,
                },
                {
                  name: '职场培训',
                  value: 5,
                },
                {
                  name: '金融财经',
                  value: 1328,
                },
                {
                  name: '银行',
                  value: 765,
                },
                {
                  name: '股票',
                  value: 452,
                },
                {
                  name: '保险',
                  value: 415,
                },
                {
                  name: '贷款',
                  value: 253,
                },
                {
                  name: '基金',
                  value: 211,
                },
                {
                  name: '信用卡',
                  value: 180,
                },
                {
                  name: '外汇',
                  value: 138,
                },
                {
                  name: 'P2P',
                  value: 116,
                },
                {
                  name: '贵金属',
                  value: 98,
                },
                {
                  name: '债券',
                  value: 93,
                },
                {
                  name: '网络理财',
                  value: 92,
                },
                {
                  name: '信托',
                  value: 90,
                },
                {
                  name: '征信',
                  value: 76,
                },
                {
                  name: '期货',
                  value: 76,
                },
                {
                  name: '公积金',
                  value: 40,
                },
                {
                  name: '银行理财',
                  value: 36,
                },
                {
                  name: '银行业务',
                  value: 30,
                },
                {
                  name: '典当',
                  value: 7,
                },
                {
                  name: '海外置业',
                  value: 1,
                },
                {
                  name: '汽车',
                  value: 1309,
                },
                {
                  name: '汽车档次',
                  value: 965,
                },
                {
                  name: '汽车品牌',
                  value: 900,
                },
                {
                  name: '汽车车型',
                  value: 727,
                },
                {
                  name: '购车阶段',
                  value: 461,
                },
                {
                  name: '二手车',
                  value: 309,
                },
                {
                  name: '汽车美容',
                  value: 260,
                },
                {
                  name: '新能源汽车',
                  value: 173,
                },
                {
                  name: '汽车维修',
                  value: 155,
                },
                {
                  name: '租车服务',
                  value: 136,
                },
                {
                  name: '车展',
                  value: 121,
                },
                {
                  name: '违章查询',
                  value: 76,
                },
                {
                  name: '汽车改装',
                  value: 62,
                },
                {
                  name: '汽车用品',
                  value: 37,
                },
                {
                  name: '路况查询',
                  value: 32,
                },
                {
                  name: '汽车保险',
                  value: 28,
                },
                {
                  name: '陪驾代驾',
                  value: 4,
                },
                {
                  name: '网络购物',
                  value: 1275,
                },
                {
                  name: '做我的猫',
                  value: 1088,
                },
                {
                  name: '只想要你知道',
                  value: 907,
                },
                {
                  name: '团购',
                  value: 837,
                },
                {
                  name: '比价',
                  value: 201,
                },
                {
                  name: '海淘',
                  value: 195,
                },
                {
                  name: '移动APP购物',
                  value: 179,
                },
                {
                  name: '支付方式',
                  value: 119,
                },
                {
                  name: '代购',
                  value: 43,
                },
                {
                  name: '体育健身',
                  value: 1234,
                },
                {
                  name: '体育赛事项目',
                  value: 802,
                },
                {
                  name: '运动项目',
                  value: 405,
                },
                {
                  name: '体育类赛事',
                  value: 337,
                },
                {
                  name: '健身项目',
                  value: 199,
                },
                {
                  name: '健身房健身',
                  value: 78,
                },
                {
                  name: '运动健身',
                  value: 77,
                },
                {
                  name: '家庭健身',
                  value: 36,
                },
                {
                  name: '健身器械',
                  value: 29,
                },
                {
                  name: '办公室健身',
                  value: 3,
                },
                {
                  name: '商务服务',
                  value: 1201,
                },
                {
                  name: '法律咨询',
                  value: 508,
                },
                {
                  name: '化工材料',
                  value: 147,
                },
                {
                  name: '广告服务',
                  value: 125,
                },
                {
                  name: '会计审计',
                  value: 115,
                },
                {
                  name: '人员招聘',
                  value: 101,
                },
                {
                  name: '印刷打印',
                  value: 66,
                },
                {
                  name: '知识产权',
                  value: 32,
                },
                {
                  name: '翻译',
                  value: 22,
                },
                {
                  name: '安全安保',
                  value: 9,
                },
                {
                  name: '公关服务',
                  value: 8,
                },
                {
                  name: '商旅服务',
                  value: 2,
                },
                {
                  name: '展会服务',
                  value: 2,
                },
                {
                  name: '特许经营',
                  value: 1,
                },
                {
                  name: '休闲爱好',
                  value: 1169,
                },
                {
                  name: '收藏',
                  value: 412,
                },
                {
                  name: '摄影',
                  value: 393,
                },
                {
                  name: '温泉',
                  value: 230,
                },
                {
                  name: '博彩彩票',
                  value: 211,
                },
                {
                  name: '美术',
                  value: 207,
                },
                {
                  name: '书法',
                  value: 139,
                },
                {
                  name: 'DIY手工',
                  value: 75,
                },
                {
                  name: '舞蹈',
                  value: 23,
                },
                {
                  name: '钓鱼',
                  value: 21,
                },
                {
                  name: '棋牌桌游',
                  value: 17,
                },
                {
                  name: 'KTV',
                  value: 6,
                },
                {
                  name: '密室',
                  value: 5,
                },
                {
                  name: '采摘',
                  value: 4,
                },
                {
                  name: '电玩',
                  value: 1,
                },
                {
                  name: '真人CS',
                  value: 1,
                },
                {
                  name: '轰趴',
                  value: 1,
                },
                {
                  name: '家电数码',
                  value: 1111,
                },
                {
                  name: '手机',
                  value: 885,
                },
                {
                  name: '电脑',
                  value: 543,
                },
                {
                  name: '大家电',
                  value: 321,
                },
                {
                  name: '家电关注品牌',
                  value: 253,
                },
                {
                  name: '网络设备',
                  value: 162,
                },
                {
                  name: '摄影器材',
                  value: 149,
                },
                {
                  name: '影音设备',
                  value: 133,
                },
                {
                  name: '办公数码设备',
                  value: 113,
                },
                {
                  name: '生活电器',
                  value: 67,
                },
                {
                  name: '厨房电器',
                  value: 54,
                },
                {
                  name: '智能设备',
                  value: 45,
                },
                {
                  name: '个人护理电器',
                  value: 22,
                },
                {
                  name: '服饰鞋包',
                  value: 1047,
                },
                {
                  name: '服装',
                  value: 566,
                },
                {
                  name: '饰品',
                  value: 289,
                },
                {
                  name: '鞋',
                  value: 184,
                },
                {
                  name: '箱包',
                  value: 168,
                },
                {
                  name: '奢侈品',
                  value: 137,
                },
                {
                  name: '母婴亲子',
                  value: 1041,
                },
                {
                  name: '孕婴保健',
                  value: 505,
                },
                {
                  name: '母婴社区',
                  value: 299,
                },
                {
                  name: '早教',
                  value: 103,
                },
                {
                  name: '奶粉辅食',
                  value: 66,
                },
                {
                  name: '童车童床',
                  value: 41,
                },
                {
                  name: '关注品牌',
                  value: 271,
                },
                {
                  name: '宝宝玩乐',
                  value: 30,
                },
                {
                  name: '母婴护理服务',
                  value: 25,
                },
                {
                  name: '纸尿裤湿巾',
                  value: 16,
                },
                {
                  name: '妈妈用品',
                  value: 15,
                },
                {
                  name: '宝宝起名',
                  value: 12,
                },
                {
                  name: '童装童鞋',
                  value: 9,
                },
                {
                  name: '胎教',
                  value: 8,
                },
                {
                  name: '宝宝安全',
                  value: 1,
                },
                {
                  name: '宝宝洗护用品',
                  value: 1,
                },
                {
                  name: '软件应用',
                  value: 1018,
                },
                {
                  name: '系统工具',
                  value: 896,
                },
                {
                  name: '理财购物',
                  value: 440,
                },
                {
                  name: '生活实用',
                  value: 365,
                },
                {
                  name: '影音图像',
                  value: 256,
                },
                {
                  name: '社交通讯',
                  value: 214,
                },
                {
                  name: '手机美化',
                  value: 39,
                },
                {
                  name: '办公学习',
                  value: 28,
                },
                {
                  name: '应用市场',
                  value: 23,
                },
                {
                  name: '母婴育儿',
                  value: 14,
                },
                {
                  name: '游戏',
                  value: 946,
                },
                {
                  name: '手机游戏',
                  value: 565,
                },
                {
                  name: 'PC游戏',
                  value: 353,
                },
                {
                  name: '网页游戏',
                  value: 254,
                },
                {
                  name: '游戏机',
                  value: 188,
                },
                {
                  name: '模拟辅助',
                  value: 166,
                },
                {
                  name: '个护美容',
                  value: 942,
                },
                {
                  name: '护肤品',
                  value: 177,
                },
                {
                  name: '彩妆',
                  value: 133,
                },
                {
                  name: '美发',
                  value: 80,
                },
                {
                  name: '香水',
                  value: 50,
                },
                {
                  name: '个人护理',
                  value: 46,
                },
                {
                  name: '美甲',
                  value: 26,
                },
                {
                  name: 'SPA美体',
                  value: 21,
                },
                {
                  name: '花鸟萌宠',
                  value: 914,
                },
                {
                  name: '绿植花卉',
                  value: 311,
                },
                {
                  name: '狗',
                  value: 257,
                },
                {
                  name: '其他宠物',
                  value: 131,
                },
                {
                  name: '水族',
                  value: 125,
                },
                {
                  name: '猫',
                  value: 122,
                },
                {
                  name: '动物',
                  value: 81,
                },
                {
                  name: '鸟',
                  value: 67,
                },
                {
                  name: '宠物用品',
                  value: 41,
                },
                {
                  name: '宠物服务',
                  value: 26,
                },
                {
                  name: '书籍阅读',
                  value: 913,
                },
                {
                  name: '网络小说',
                  value: 483,
                },
                {
                  name: '关注书籍',
                  value: 128,
                },
                {
                  name: '文学',
                  value: 105,
                },
                {
                  name: '报刊杂志',
                  value: 77,
                },
                {
                  name: '人文社科',
                  value: 22,
                },
                {
                  name: '建材家居',
                  value: 907,
                },
                {
                  name: '装修建材',
                  value: 644,
                },
                {
                  name: '家具',
                  value: 273,
                },
                {
                  name: '家居风格',
                  value: 187,
                },
                {
                  name: '家居家装关注品牌',
                  value: 140,
                },
                {
                  name: '家纺',
                  value: 107,
                },
                {
                  name: '厨具',
                  value: 47,
                },
                {
                  name: '灯具',
                  value: 43,
                },
                {
                  name: '家居饰品',
                  value: 29,
                },
                {
                  name: '家居日常用品',
                  value: 10,
                },
                {
                  name: '生活服务',
                  value: 883,
                },
                {
                  name: '物流配送',
                  value: 536,
                },
                {
                  name: '家政服务',
                  value: 108,
                },
                {
                  name: '摄影服务',
                  value: 49,
                },
                {
                  name: '搬家服务',
                  value: 38,
                },
                {
                  name: '物业维修',
                  value: 37,
                },
                {
                  name: '婚庆服务',
                  value: 24,
                },
                {
                  name: '二手回收',
                  value: 24,
                },
                {
                  name: '鲜花配送',
                  value: 3,
                },
                {
                  name: '维修服务',
                  value: 3,
                },
                {
                  name: '殡葬服务',
                  value: 1,
                },
                {
                  name: '求职创业',
                  value: 874,
                },
                {
                  name: '创业',
                  value: 363,
                },
                {
                  name: '目标职位',
                  value: 162,
                },
                {
                  name: '目标行业',
                  value: 50,
                },
                {
                  name: '兼职',
                  value: 21,
                },
                {
                  name: '期望年薪',
                  value: 20,
                },
                {
                  name: '实习',
                  value: 16,
                },
                {
                  name: '雇主类型',
                  value: 10,
                },
                {
                  name: '星座运势',
                  value: 789,
                },
                {
                  name: '星座',
                  value: 316,
                },
                {
                  name: '算命',
                  value: 303,
                },
                {
                  name: '解梦',
                  value: 196,
                },
                {
                  name: '风水',
                  value: 93,
                },
                {
                  name: '面相分析',
                  value: 47,
                },
                {
                  name: '手相',
                  value: 32,
                },
                {
                  name: '公益',
                  value: 90,
                },
              ],
            },
          ],
        };
        this.chart.setOption(option); // 使用刚指定的配置项和数据显示图表。
      },
      screenAdapter() {
        // 获取自适应大小
        const titleFontSize = (this.$refs.CloudArea.offsetWidth / 100) * 3.6;
        // eslint-disable-next-line no-console
        console.log('titleFontSize', titleFontSize);
        // 自适应配置
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize, // 自适应字体大小
            },
          },
          legend: {
            // 图例组件
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2, // 自适应字体大小
            },
          },
        };
        this.chart.setOption(adapterOption);
        // 自适应
        this.chart.resize();
      },
    },
  };
</script>

<style scoped></style>
